<template>
  <div class="cities-wrapper clearfix" ref="listWrapper">
    <div class="content">

      <div class="hot-cities">
        <div class="hot-cities-title">热门城市</div>
        <ul class="list clearfix">
          <li class="list-item" 
              v-for="(item, index) in hotCities" :key ="item.id" 
              :class="(index + 1) % 3 ? 'border-rightBottom':'border-bottom' "
              v-on:click="handleChangeCity(item.name)"
          >
            {{item.name}}
          </li>
        </ul>
      </div>

      <div class="alphabet-menu">
        <div class="menu-title">字符排序</div>
        <ul class="list clearfix">
          <li class="list-item" 
            v-for="(value, letterKey, index) in cities" :key ="index"
            :class="(index + 1) % 6 ? 'border-rightBottom':'border-bottom' "
            @click ="handleLetterClick"
          >
            {{letterKey}}
          </li>
        </ul>
      </div>

      <div class="alphabet-list">
        <div class="list-wrap" v-for="(cityGroup, letterKey, index) in cities" :key ="index" :ref="letterKey">
          <div class="list-title">{{letterKey}}</div>
          <ul class="list clearfix">
            <li class="list-item" 
            v-for="(city) in cityGroup" :key ="city.id"
            :class="(index + 1) % 4 ? 'border-rightBottom':'border-bottom' "
            v-on:click="handleChangeCity(city.name)"
          >
              {{city.name}}
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll"
import {mapMutations} from 'vuex'

export default {
  name: "CityList",
  props: {
    cities: Object,
    hotCities: Array
  },
  data() {
    return {
      scroll: {},
      letter: ''
    };
  },
  methods: {
    handleLetterClick: function(e){
      this.letter = e.target.innerText;
    },
    handleChangeCity: function(city){
      //普通走dispatch
      // this.$store.dispatch('changeCityName', city);
      //信息量少的直接commit
      // this.$store.commit('changeCityName', city);

      this.changeCityName2(city);

      this.$router.push('/');
    },
    ...mapMutations({
      changeCityName2: 'changeCityName'
    })
  },
  watch: {
    letter: function(){
      let el = this.$refs[this.letter][0];
      this.scroll.scrollToElement(el, 1000);
    }
  },
  mounted: function() {
    this.scroll = new BScroll(this.$refs.listWrapper, {
      click: true //不配置默认阻止点击事件，需要设为true才可点击
    });
  }
};

//解决页面点击的bug
window.addEventListener('touchmove', function(){}, { passive: false })
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.cities-wrapper {
  position: absolute;
  top: 0.88rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.hot-cities, .alphabet-menu, .alphabet-list {
  width: 100%;
}

.hot-cities .hot-cities-title, .alphabet-menu .menu-title, .alphabet-list .list-title {
  height: 0.72rem;
  line-height: 0.72rem;
  padding: 0 0.2rem;
  font-size: 0.26rem;
  color: $darkTxtColor;
  background-color: $bgColor;
}


.hot-cities .list-item {
  float: left;
  width: 33%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-menu .list-item {
  float: left;
  width: 16.6%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.alphabet-list .list-item {
  float: left;
  width: 24.9%;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  text-indent: .02rem;
  ellipsis();
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.border-bottom {
  border: 0.02rem solid #eee;
  border-width: 0 0 0.02rem 0;
  box-sizing: border-box;
}

.border-rightBottom {
  border: 0.02rem solid #eee;
  border-width: 0 0.02rem 0.02rem 0;
  box-sizing: border-box;
}
</style>